<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>


</head>
<body>
    <div class="app-home dpflex fdcolumn">
        <header>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../imgs/swiper1.jpg"></div>
                    <div class="swiper-slide"><img src="../imgs/swiper2.jpeg"></div>
                    <div class="swiper-slide"><img src="../imgs/swiper3.jpeg"></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                
                <!-- 如果需要滚动条 -->
                <div class="swiper-scrollbar"></div>
            </div>
        </header>
        <main class="dpflex fdcolumn wrapper">
            <section class="dpflex mt8">
                <div class="ranking pr bgr brad">
                    <p class="pa f20 c004 fb">今日排名</p>
                    <p class="pa f38 cf fb" id="rank">9</p>
                </div>
                <div class="punch pr bgr brad">
                    <p class="pa f20 c005 fb">累积打卡<span id="medal">23</span>天</p>
                    <p class="pa f20 brad tac f14 c004" id="today">今日打卡</p>
                </div>
            </section>
            <section class="dpflex mt8 pr">
                <div class="exercise brad bgr">
                    <p class="f16 pa cf fb">运动数据</p>
                </div>
                <div class="medal brad bgr pr">
                    <p class="pa f16 fb c005">累积运动徽章</p>
                    <p class="pa f18 fb c005"><span class="f34" id="punch">3</span>枚</p>
                </div>
            </section>
            <section class="mt8 pr brad">
                <p class="pa cf fb">课程训练</p>
            </section>
            <section class="mt8 pr brad">
                <p class="pa cf fb">户外跑步</p>
            </section>
        </main>
        <footer class="mt8">
            
        </footer>
    </div>
</body>
</html>